<template>
  <div>
    <solt v-if="tree">
      <el-tree-select
        v-model="chanValue"
        :data="data.dictStore"
        :multiple="props.multiple"
        :filterable="props.filterable"
        :allow-create="props.allowCreate"
        :placeholder="props.placeholder"
        :disabled="props.disabled"
        :size="props.size"
        :clearable="props.clearable"
        :collapse-tags="props.collapseTags"
        :collapse-tags-tooltip="props.collapseTagsTooltip"
        :multiple-limit="props.multipleLimit"
        :effect="props.effect"
        :autocomplete="props.autocomplete"
        :reserve-keyword="props.reserveKeyword"
        :default-first-option="props.defaultFirstOption"
        :automatic-dropdown="props.automaticDropdown"
        :fit-input-width="props.fitInputWidth"
        :tag-type="props.tagType"
        :placement="props.placement"
        :checkStrictly="props.checkStrictly"
        default-expand-all="true"
        @change="change"
        @visible-change="visibleChange"
        @remove-tag="removeTag"
        @clear="clear"
        @blur="blur"
        @focus="focus"></el-tree-select>
    </solt>
    <solt v-else-if="icon">
      <el-popover :visible="data.visible" placement="bottom" :width="360">
        <div style="text-align: right; margin: 0">
          <div class="icon-list">
            <ul class="demo-icon-list">
              <li v-for="(icon, num) in icons.glyphs" :key="num" class="icon-item" @click="changeIcon(icon.font_class)">
                <span class="demo-svg-icon">
                  <el-tooltip placement="bottom" effect="dark">
                    <template #content> {{ icon.name }}</template>
                    <yu-icon :iconName="icon.font_class"></yu-icon>
                    <!-- <el-icon>
                      <component :is="icon.key" />
                    </el-icon> -->
                  </el-tooltip>
                </span>
              </li>
            </ul>
          </div>
        </div>
        <template #reference>
          <el-input v-model="chanValue" placeholder="选择图标" @focus="iconfocus" @blur="iconblur" readonly>
            <template #prefix>
              <yu-icon :iconName="chanValue" class="icon-select" />
            </template>
          </el-input>
        </template>
      </el-popover>
    </solt>
    <solt name="select" v-else>
      <el-select
        v-model="chanValue"
        :multiple="props.multiple"
        :filterable="props.filterable"
        :allow-create="props.allowCreate"
        :placeholder="props.placeholder"
        :disabled="props.disabled"
        :size="props.size"
        :clearable="props.clearable"
        :collapse-tags="props.collapseTags"
        :collapse-tags-tooltip="props.collapseTagsTooltip"
        :multiple-limit="props.multipleLimit"
        :effect="props.effect"
        :autocomplete="props.autocomplete"
        :reserve-keyword="props.reserveKeyword"
        :default-first-option="props.defaultFirstOption"
        :automatic-dropdown="props.automaticDropdown"
        :fit-input-width="props.fitInputWidth"
        :tag-type="props.tagType"
        :placement="props.placement"
        @change="change"
        @visible-change="visibleChange"
        @remove-tag="removeTag"
        @clear="clear"
        @blur="blur"
        @focus="focus">
        <el-option v-for="item in data.dictStore" :key="item[val]" :value="item[val]" :label="item[lab]" :disabled="item.disabled" />
      </el-select>
    </solt>
  </div>
</template>

<script setup>
  import { ref, toRef, reactive, computed, onBeforeMount, getCurrentInstance, onBeforeUpdate } from 'vue';
  import yu_select from '@/pub/yu-select.js';
  import * as iconAll from '@element-plus/icons-vue';
  const { proxy } = getCurrentInstance();
  let icons = ref({});
  //数据封装 在data中 双向绑定
  const data = reactive({
    visible: false,
    dictStore: [], //数据中心
  });
  const iconfocus = () => {
    data.visible = true;
  };
  const iconblur = () => {
    data.visible = false;
  };
  const changeIcon = key => {
    chanValue.value = key;
  };
  onBeforeUpdate(() => {
    if (props.default) {
      emits('update:value', data.dictStore[0][props.val]);
    }
  });

  onBeforeMount(() => {
    if (props.dictCode) {
      getDictStores(props.dictCode);
    } else {
      data.dictStore = toRef(props, 'options');
    }

    if (props.icon) {
      getIconStores();
    }
  });
  const getDictStores = async dictCode => {
    data.dictStore = await proxy.$api.data.getSysDictByCode(dictCode);
  };

  const getIconStores = async => {
    proxy.$api.system.getYuIcon().then(res => {
      icons.value = res;
    });
  };
  //默认值取配置中
  const props = defineProps({
    //是否默认第一个值
    default: false,
    //默认下拉数据从集中字典中取值
    dictCode: { type: String, default: '' },
    //默认数据显示
    lab: { type: String, default: yu_select.select.displayName },
    //默认数据有效值
    val: { type: String, default: yu_select.select.displayValue },
    //树状结构下拉
    tree: { type: Boolean, default: false },
    //选择下拉
    select: { type: Boolean, default: false },
    //图标
    icon: { type: Boolean, default: false },
    //值
    value: { type: String, default: '' },
    //默认显示 占位显示
    placeholder: { type: String, default: yu_select.select.placeholder },
    //数据集 数组显示
    options: { type: Array, default: [] },
    //是否多选
    multiple: { type: Boolean, default: yu_select.select.multiple },
    //是否禁用
    disabled: { type: Boolean, default: yu_select.select.disabled },
    //输入框尺寸
    size: { type: String, default: yu_select.select.size },
    //是否可以清空选项
    clearable: { type: Boolean, default: yu_select.select.clearable },
    //多选时是否将选中值按文字的形式展示
    collapseTags: { type: Boolean, default: yu_select.select.collapseTags },
    //当鼠标悬停于折叠标签的文本
    collapseTagsTooltip: {
      type: Boolean,
      default: yu_select.select.collapseTagsTooltip,
    },
    //选择数量
    multipleLimit: { type: Number, default: yu_select.select.multipleLimit },
    //Tooltip 主题
    effect: { type: String, default: yu_select.select.effect },
    //autocomplete 属性
    autocomplete: { type: String, default: yu_select.select.autocomplete },
    //是否筛选
    filterable: { type: Boolean, default: yu_select.select.filterable },
    //是否允许用户创建新条目
    allowCreate: { type: Boolean, default: yu_select.select.allowCreate },
    //选项后保留当前的搜索关键词
    reserveKeyword: { type: Boolean, default: yu_select.select.reserveKeyword },
    //是否在输入框按下回车时，选择第一个匹配项
    defaultFirstOption: {
      type: Boolean,
      default: yu_select.select.defaultFirstOption,
    },
    //automaticDropdown
    automaticDropdown: {
      type: Boolean,
      default: yu_select.select.automaticDropdown,
    },
    //自定义清除图标
    clearIcon: { type: Boolean, default: yu_select.select.clearIcon },
    //宽度是否与输入框相同
    fitInputWidth: { type: Boolean, default: yu_select.select.fitInputWidth },
    //自定义后缀图标组件
    suffixIcon: { type: Boolean, default: yu_select.select.suffixIcon },
    //标签类型		success/info/warning/danger
    tagType: { type: Boolean, default: yu_select.select.tagType },
    //下拉框出现的位置
    placement: { type: String, default: yu_select.select.placement },
    //树状结构 非末级节点是否能选择
    checkStrictly: { type: Boolean, default: yu_select.tree.checkStrictly },
  });
  // 通过重写计算属性的set和get方法，将计算属性的结果绑定在输入框的model中
  const chanValue = computed({
    get: () => props.value,
    set: val => {
      emits('update:value', val);
    },
  });
  const emits = defineEmits(['update:value']);

  //change回调
  const change = value => {
    emits('change', value);
  };
  //下拉框出现/隐藏时触发
  const visibleChange = value => {
    emits('visibleChange', value);
  };
  //多选模式下移除tag时触发
  const removeTag = value => {
    emits('removeTag', value);
  };
  //可清空的单选模式下用户点击清空按钮时触发
  const clear = value => {
    emits('clear', value);
  };
  //当 input 失去焦点时触发
  const blur = value => {
    emits('blur', value);
  };
  //当 input 获得焦点时触发
  const focus = value => {
    emits('focus', value);
  };
</script>
<style lang="scss" scoped>
  .icon-list {
    width: 100%;
    height: 400px;
    overflow-y: auto;
  }
  .icon-name {
    padding-top: 2px;
  }
  .demo-icon-list {
    overflow: hidden;
    list-style: none;
    padding: 0 !important;
    border-top: 1px solid var(--el-border-color);
    border-left: 1px solid var(--el-border-color);
    border-radius: 4px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }
  .icon-item {
    cursor: pointer;
    text-align: center;
    color: var(--el-text-color-regular);
    height: 40px;
    font-size: 10px;
    border-right: 1px solid var(--el-border-color);
    border-bottom: 1px solid var(--el-border-color);
    transition: background-color var(--el-transition-duration);
    :hover {
      background-color: #f5f7fa;
    }
  }
  .demo-svg-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    // cursor: pointer;
  }
  .svg-icon {
    --color: inherit;
    height: 2em;
    width: 2em;
    line-height: 2em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    fill: currentColor;
    color: var(--color);
    font-size: inherit;
    svg {
      height: 1.5em;
      width: 1.5em;
    }
  }
  .icon-item:hover {
    font-size: 20px;
  }
  .icon-select {
    width: 1.5em;
    height: 1.5em;
  }
</style>
